<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lesson 19</title>
    <script src="../dist/vue.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // watch 侦听器
    // watchEffect 侦听器，偏向于 effect
    const app = Vue.createApp({
      setup() {
        const { toRefs, reactive, watch, watchEffect } = Vue;
        const nameObj = reactive({
          name: "小李子",
          englishName: "Jack Dawson"
        });

        // watch(
        //   [() => nameObj.name, () => nameObj.englishName],
        //   ([curName, curEngName], [oldName, oldEngName]) => {
        //     console.table({ curName: curName, oldName: oldName });
        //     console.table({ curEngName: curEngName, oldEngName: oldEngName });
        //   },
        //   { immediate: true }
        // );

        const stop = watchEffect(() => {
          // console.log(nameObj);
          console.log(nameObj.name);
          console.log(nameObj.englishName);
          setTimeout(() => {
            stop();
          }, 5000);
        });

        const { name, englishName } = toRefs(nameObj);

        return { name, englishName };
      },
      template: `
      <div>
        <div>
          Name: <input v-model="name">
        </div>
        <div>
          Name is {{name}}
        </div>
        <div>
          EnglishName: <input v-model="englishName">
        </div>
        <div>
          EnglishName is {{englishName}}
        </div>
      </div>
    `
    });
    const vm = app.mount("#root");
  </script>
</html>
